<template>
	<view>
		<view class="con">
			<view class="" style="padding: 0 29rpx;">
				<u-search placeholder="请输入搜索内容" height='73rpx' placeholderColor='#A09E9E' :showAction='false'
					v-model="keyword" @search='search'></u-search>
			</view>
			
			<u-tabs :list="list1" :current='status' itemStyle='height:80rpx' @click="click" lineColor='#FF7428'
				activeStyle='color:#181818;font-size:30rpx;font-weight:bold' lineHeight='12rpx' lineWidth='32rpx'
				inactiveStyle='color:#333333;font-size:30rpx' :scrollable='false'></u-tabs>
			<scroll-view scroll-y="true" class="scrollview" @scrolltolower="scrolltolower">
				<view class="scrollviewbox" v-if="prolist.length>0">
					<view class="proitem" v-for="(item,index) in prolist" :key="index" @click="clickto('/pages/order/detail?id='+item.id)">
						<view class="more" @click.stop="moreshow=!moreshow">
							更多
							<view class="more_box" v-if="moreshow">
								查看物流
							</view>
						</view>
						
						<view class="prosj flex" @click.shop="clickto('/pages/product/smart?user_id='+item.storeId)">
							<image class="sj_icon" src="/static/img/shopcar/shangj.png" mode=""></image>
							<view class="sjname">
								{{item.storeName}}
							</view>
							<image class="right_icon" src="/static/img/my/right.png" mode=""></image>
						</view>
						<view class="item_top flex">
							<image class="pro_pic" :src="item.pic" mode=""></image>
							<view class="top_right flex">
								<view class="pro_name">
									{{item.p_name}}
								</view>
								<view class="pro_kc">
									{{item.address}}
								</view>
								<view class="por_price flex">
									<view class="num">
										数量×{{item.num}}
									</view>
									<view class="">
										<image v-if="item.method==4" style="width: 22rpx;height: 22rpx;" src="/static/img/proitem/jf.png"
											mode=""></image>
										<image v-if="item.method==3" style="width: 22rpx;height: 22rpx;" src="/static/img/proitem/tz.png"
											mode=""></image>
										<text v-if="item.method==0||item.method==1||item.method==2">￥</text>
										<text style="font-size: 36rpx;">{{item.price}}</text>
									</view>

								</view>
							</view>
						</view>
						<view class="caoz flex">
							<view class="time">
								<view class="" v-if="status==0">
									<!-- 创建时间:2022-09-23 16:42 -->
									创建时间:{{$u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM')}}
								</view>
								<view class="" v-if="status==1">
									<!-- paytime -->
									付款时间:{{$u.timeFormat(item.paytime, 'yyyy-mm-dd hh:MM')}}
								</view>
								<view class="" v-if="status==2">
									发货时间:{{item.sendtime}}
								</view>
								<view class="" v-if="status==3">
									完成时间:2022-09-23 16:42
								</view>
							</view>
							<view class="flex">
								<view class="btn btn1" v-if="status==0" @click.stop="clickto(`/pages/order/sureorder?id=${item.p_id}&num=${item.num}&ggid=${item.spec_id}&type=${item.method==3?'tz':item.method==4?'jf':'no'}&user_id=${item.storeId}`)">
									立即付款
								</view>
								<view class="btn btn1" v-if="status==2" @click.stop="orderok(item.id)">
									确认收货
								</view>
								<view class="btn" v-if="status==1" @click.stop="clickto('/pages/order/detail?id='+item.id)">
									查看详情
								</view>
								<view class="btn" v-if="status==3" @click.stop="deleteProductMerchants(item.id)">
									删除订单
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="empty" v-else>
					<image class="empty_icon" src="/static/img/product/noorder.png" mode=""></image>
					您还没有相关的订单
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import {ourProduct} from '@/api/my.js'
	import { getOrderMerchant, deleteProductMerchant, merchantSend ,cancelorder,okorder} from '@/api/product.js'
	export default {
		data() {
			return {
				keyword: '',
				list1: [{
					name: '待付款'
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				},{
					name: '已完成'
				}],
				prolist: [],
				status: 0,
				from:'',
				page:1,
				last_page:1,
				loadmorestatus:'loadmore',
				moreshow:false
			};
		},
		methods: {
			click(n) {
				this.status = n.index
				this.prolist=[]
				this.page=1
				this.getorderlist()
			},
			search(){
				this.prolist=[]
				this.page=1
				this.getorderlist()
			},
			orderok(id){
				let _this=this
				uni.showModal({
					title:'确认该商品已到货？',
					success(res) {
						// console.log(res)
						if(res.confirm){
							okorder({orderid:id}).then(res=>{
								if(res.data.code==1){
									uni.showToast({
										title:'收货成功',
										icon:'none'
									})
									setTimeout(()=>{
										_this.page=1
										_this.prolist=[]
										_this.getorderlist()
									},1000)
								}
							})
						}
					}
				})
			},
			getorderlist(){
				ourProduct({status:this.status,page:this.page,keyword:this.keyword}).then(res=>{
					if(res.data.code==1){
						this.last_page=res.data.data.last_page
						this.prolist=[...this.prolist,...res.data.data.data]
						this.loadmorestatus='loadmore'
						if(!this.prolist.length>0){
							this.loadmorestatus='nomore'
						}
						this.prolist.map(t=>{
							t.pic=this.$BASE_URL+t.p_image.split(',')[0]
						})
					}
					// console.log(this.prolist)
				})
			},
			deleteProductMerchants(id) {
				deleteProductMerchant({id}).then(res => {
					// console.log(res.data)
					if(res.data.code==1){
						uni.showToast({
							title:'删除成功',
							icon:'none'
						})
						setTimeout(()=>{
							this.page=1
							this.prolist=[]
							this.getorderlist()
						},1000)
					}
				})
			},
			clickto(url){
				// console.log(item)
				uni.navigateTo({
					url
				})
			},
			scrolltolower(){
				this.page++
				this.loadmorestatus='loading'
				if(this.page<=this.last_page){
					this.getorderlist()
				}else{
					this.loadmorestatus='nomore'
				}
			}
		},
		onLoad(option) {
			this.from=option.from
			if(option.status){
				this.status=option.status
			}
			this.getorderlist()
		},
		onUnload(){
			console.log(this.from)
			if(this.from!='mine'){
				uni.navigateBack({
					delta:2
				})
			}
		}
	}
</script>

<style lang="less">
	.con {
		padding: 29rpx 0;
		border-top: 2rpx solid #F4F6F8;

		.scrollview {
			height: calc(100vh - 80rpx - 73rpx - 44px - 58rpx - 6rpx);
			/* #ifdef MP */
			height: calc(100vh - 80rpx - 73rpx - 58rpx - 6rpx);
			/* #endif */
		}

		.scrollviewbox {
			padding: 0 32rpx 26rpx 27rpx;

			.proitem {
				margin-top: 26rpx;
				background: #FFFFFF;
				box-shadow: 0px 1rpx 24rpx 0px rgba(24, 24, 24, 0.08);
				border-radius: 25rpx;
				padding: 32rpx 48rpx 32rpx 30rpx;
				position: relative;
				.more{
					position: absolute;
					top: 32rpx;
					right: 48rpx;
					font-size: 30rpx;
					.more_box{
						width: 150rpx;
						position: absolute;
						top: 40rpx;
						right: 0;
						text-align: right;
						// border: 1;
						
					}
				}
				.item_top {
					.pro_pic {
						width: 140rpx;
						height: 140rpx;
						border-radius: 8rpx;
						margin-right: 26rpx;
					}

					.top_right {
						flex-direction: column;
						align-items: flex-start;
						justify-content: space-between;
						height: 140rpx;
						flex: 1;

						.pro_name {
							color: #333333;
							font-size: 32rpx;
							font-weight: bold;
						}

						.pro_kc {
							color: #6A6A6A;
							font-size: 24rpx;
						}

						.por_price {
							// align-self: flex-end;
							justify-content: space-between;
							font-size: 24rpx;
							font-weight: bold;
							color: #FD2A00;
							width: 100%;

							.num {
								color: #6A6A6A;
								font-weight: normal;
								font-size: 24rpx;
							}
						}
					}
				}

				.caoz {
					justify-content: space-between;
					width: 100%;
					margin-top: 52rpx;
					
					.time{
						color: #6A6A6A;
						font-size: 24rpx;
						min-width: 1rpx;
					}
					.btn {
						padding: 0 42rpx;
						line-height: 68rpx;
						border: 1rpx solid #CCCCCC;
						border-radius: 34rpx;
						text-align: center;
						color: #0B0B0B;
						font-size: 30rpx;
						margin-left: 22rpx;
					}

					.btn1 {
						border: 0;
						background: linear-gradient(153deg, #FF8717, #FF5F00);
						color: #fff;
					}
				}
			}
		}

	}

	.release {
		width: 147rpx;
		height: 140rpx;
		position: fixed;
		bottom: 85rpx;
		right: 23rpx;
	}
	.prosj{
		color: #616161;
		font-size: 24rpx;
		margin-bottom: 38rpx;
		.sj_icon{
			width: 28rpx;
			height: 26rpx;
			margin-right: 10rpx;
		}
		.right_icon{
			width: 12rpx;
			height: 18rpx;
			left: 7rpx;
		}
	}
	.empty{
		display: flex;
		justify-content: center;
		margin-top: 100rpx;
		flex-direction: column;
		align-items: center;
		font-size: 40rpx;
		.empty_icon{
			width: 150rpx;
			height: 150rpx;
			margin-bottom: 60rpx;
		}
	}
</style>
